{% extends "layout.html" %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/message_board.css') }}">
<!-- 引入富文本编辑器CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/froala_editor/froala_editor.pkgd.min.css') }}">

{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/message_board.js') }}"></script>
<!-- 使用更可靠的CDN -->
    <!--<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet">-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/froala-editor/4.0.17/js/froala_editor.pkgd.min.js"></script>-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/froala-editor/4.0.17/js/languages/zh_cn.min.js"></script>-->

<script src="{{ url_for('static', filename='js/froala_editor/froala_editor.pkgd.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/froala_editor/zh_cn.min.js') }}"></script>
{% endblock %}


{% block content %}
<div class="message-board-container">
    <h2>徒步爱好者留言板</h2>

    <!-- 留言表单 -->
    <div class="message-form card">
        <form method="POST" action="{{ url_for('messages.message_board') }}" enctype="multipart/form-data">
            <textarea name="content"></textarea>
            <div class="form-footer">
                <button type="submit" class="submit-btn">发布留言</button>
            </div>
        </form>
    </div>

    <!-- 留言列表 -->
    <div class="messages-list">
        {% for message in messages %}
        <div class="message card" id="message-{{ message.id }}">
            <div class="message-header">
                <div class="user-info">
                    <span class="username">{{ message.username }}</span>
                    <span class="date">{{ message.created_at }}</span>
                </div>
                {% if message.user_id == current_user.id %}
                <form method="POST" action="{{ url_for('messages.delete_message', message_id=message.id) }}" class="delete-form">
                    <button type="submit" class="delete-btn" title="删除留言">×</button>
                </form>
                {% endif %}
            </div>

            <div class="message-content">
                {{ message.content | safe }}
            </div>

            <!-- 回复区域 -->
            <div class="reply-area">
                <!-- 回复列表 -->
                {% if message.replies %}
                <div class="replies">
                    <h4>回复 ({{ message.replies|length }})</h4>
                    {% for reply in message.replies %}
                    <div class="reply card">
                        <div class="reply-header">
                            <div class="user-info">
                                <span class="username">{{ reply.username }}</span>
                                <span class="date">{{ reply.created_at }}</span>
                            </div>
                        </div>
                        <div class="reply-content">
                            {{ reply.content | safe }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}

                <!-- 回复表单 -->
                <div class="reply-form-container">
                    <form method="POST" action="{{ url_for('messages.reply_message', message_id=message.id) }}" class="reply-form">
                        <textarea name="content" class="froala-reply-editor"></textarea>
                        <div class="form-footer">
                            <button type="submit" class="submit-btn">发表回复</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}